<template>
  <div class="flex items-center space-x-2 cursor-pointer logo-container text-xl" @click="turn && navigateTo('/')">
    <img src="/logo.svg" alt="球球助手" class="w-10 h-10" />
    <span v-if="showText" class="font-bold bg-gradient-to-r from-yellow-400 via-orange-400 to-amber-500 bg-clip-text text-transparent">
      球球助手
    </span>
  </div>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    showText?: boolean;
    turn?: boolean;
  }>(),
  {
    showText: true,
    turn: true,
  },
);
</script>

<style scoped>
/* 简洁金币样式 */
.coin-outer {
  transform-origin: center;
  transition: all 0.3s ease;
}

.coin-inner {
  transform-origin: center;
  transition: all 0.3s ease;
}

.coin-symbol {
  transform-origin: center;
  transition: all 0.3s ease;
}

/* 悬停动画效果 - 简化版 */
.logo-container:hover .coin-outer {
  animation: coinRotate 0.6s ease-in-out;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
}

.logo-container:hover .coin-inner {
  animation: innerPulse 0.8s ease-in-out;
}

.logo-container:hover .coin-symbol {
  animation: symbolFloat 0.7s ease-in-out;
}

/* 简单旋转动画 */
@keyframes coinRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.05);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* 内圈脉冲 */
@keyframes innerPulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* 符号浮动 */
@keyframes symbolFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* Logo容器效果 */
.logo-container {
  transition: all 0.3s ease;
}

.logo-container:hover {
  transform: translateY(-1px);
}
</style>
